<template>
	<view>
		<view class="mod-box" :class="{'big-mode-box':vuex_is_zhangbei==1}">
			<view class="grid-list flex">
				<view class="grid-item" v-for="(item,index) in list" :key="index" @click="customNavClick(item,index)">
					<view class="img-box">
						<image class="img" :src="item.thumb" mode=""></image>
					</view>
					<view class="grid-title">
						{{item.title}}
					</view>
				</view>
				<view class="grid-item"  @click="this.toRoute('product-list')">
					<view class="img-box">
						<image class="img" src="/static/index/cat-ico.png" mode=""></image>
					</view>
					<view class="grid-title">
						更多产品
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			customNavClick(item) {
				this.$log('customNavClick 参数', item)
				if (item.url) {
					this.handleUrlJump(item.url)
				} else if (item.id) {
					/* this.toRoute({
						path: '/category',
						query: {
							id: item.id
						}
					}) */
					this.toRoute({
						path: '/product-list',
						query: {
							channelId: item.id,
							title:item.title
						}
					})
					
				}
			},
		}
	}
</script>

<style lang="scss">
.mod-box {
		margin-top: 0;
		margin-bottom: 24rpx;
		padding: 40rpx 0 30rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		// border-radius: 32rpx 32rpx 32rpx 32rpx;

		.grid-list {
			flex-wrap: wrap;

			.grid-item {
				width: 20%;
				// flex: 1;
				text-align: center;
				margin-top: 40rpx;

				&:nth-child(-n + 5) {
					margin-top: 0;
				}

				.img-box {
					width: 80rpx;
					height: 80rpx;
					margin: 0 auto;

					.img {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.grid-title {
					margin-top: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					font-size: 22rpx;
					color: #000000;
				}
			}
		}
	}
	.big-mode-box{
		.grid-title{
			font-size: 28rpx !important;
		}
	}
</style>
